<!-- -->
<template>
  <div id='gradelist'>
    <div class="tradetop">现金积分交易中心</div>
    <!-- 我要挂卖 -->
    <div class="tradesell" v-if="tradesell">
        <!-- <div class="warning">&nbsp;注意：每一笔交易，卖方用户都需要支付10%的手续费，手续费在订单确定后直接从现金积分中扣除。</div> -->
        <div class="message">
            <ul>
                <li>用户名：   <span>&emsp;&emsp;&emsp;{{name}}</span></li>
                <li>挂卖数量： &emsp;&emsp;<input type="text" v-model="number" placeholder="请输入数量"></li>
                <!-- <li>手续费：&emsp;&emsp;&emsp;&nbsp;<span>&yen;{{number*6.3}}</span></li> -->
                <li>收款地址：&emsp;&emsp;&nbsp;<input type="text" v-model="address" placeholder="请输入收款地址">&emsp;</li>
                <li>安全密码：&emsp;&emsp;&nbsp;<input type="password" v-model="password" placeholder="请输入你的安全密码">&emsp;<span>输入安全密码以验证身份，确保账号交易安全</span></li>
            </ul>
        </div>
        <div class="btn">
            <button @click="tradesellalert">确定挂卖</button>
            <router-link :to="{name:'grade'}" tag="a"><button class="button2">取消</button></router-link>
        </div>
    </div>
    <!-- 买入 -->
    <div class="tradesell" v-if="tradebuy">
        <div class="message">
            <ul>
                <li>挂卖用户名：   <span>&emsp;&emsp;{{name}}</span></li>
                <li>联系方式：<span>&emsp;&emsp;&emsp;&nbsp;{{phone}}</span>&emsp;</li>
                <li>挂卖现金积分： &emsp;<span>{{price}}</span></li>
                <li>支付金额：&emsp;&emsp;&emsp;&nbsp;<span style="color:rgba(224,3,0,1)">&yen;{{price*6.3}}</span>&nbsp;</li>
                <li>收款地址：<span>&emsp;&emsp;&emsp;&nbsp;{{address}}</span>&emsp;</li>
                <li>安全密码：&emsp;&emsp;&emsp;&nbsp;<input type="password" v-model="password" placeholder="请输入你的安全密码">&emsp;<span>输入安全密码以验证身份，确保账号交易安全</span></li>
            </ul>
        </div>
        <div class="btn">
            <button @click="tradebuyalert">确定购买</button>
            <router-link :to="{name:'grade'}" tag="a"><button class="button2">取消</button></router-link>
        </div>
    </div>
    <!-- 挂买-卖出交易中心 -->
     <div class="tradesell" v-if="buymes">
        <div class="message buymes">
            <ul>
                <li>挂卖用户名： <span>&emsp;&emsp;{{name}}</span></li>
                <li>联系方式：<span>&emsp;&emsp;&emsp;&nbsp;{{phone}}</span>&emsp;</li>
                <li>挂卖现金积分： &emsp;<span>{{price}}</span></li>
                <li>支付金额：<span style="color:rgba(224,3,0,1)">&emsp;&emsp;&emsp;&nbsp;&yen;{{price*6.3}}</span>&nbsp;</li>
                <li>收款地址：<span>&emsp;&emsp;&emsp;&nbsp;{{address}}</span>&emsp;</li>
                <li>交易时间：&emsp;&emsp;&emsp;&nbsp;<span>{{time}}</span></li> 
            </ul>
        </div>
        <div class="uploadimg">
            <p>{{progect[titlelist]}}</p>
            <div class="imageload" v-if="titlelist ==='1'">
                <a href="#">请上传100k以内图片
                    <!-- <form name="imgForm" id="imgForm" enctype="multipart/form-data" action="图片上传接口"> -->
                        <input class="imginp"  name="imgLocal" id="imgLocal" type='file' accept="image/*" @change="shangchuan"/>
                    <!-- </form> -->
                    <i class="el-icon-plus"></i>
                </a>
            </div>
            <div class="yulanimg" v-if="titlelist==='2'||titlelist==='0'"><img :src="yulanimg" alt=""></div>
            <p class="notice" v-if="titlelist==='1'">·确定上传打款截图后不可更改，请谨慎选择打款截图，以保证交易尽快完成。</p>
            <p class="notice" v-if="titlelist==='0'">·请仔细核对打款截图以及收款数额，确定收款后，现金积分将打入对方的钱包中。<br>如截图或金额有问题请联系平台。</p>
        </div>
        <div class="btn" v-if="titlelist==='1'">
            <button @click="sureshang">确定上传</button>
            <button @click="shangchuanclose">取消</button>
        </div>
        <div class="btn" v-if="titlelist==='0'">
            <button @click="sureshoukuan">确定收款</button>
            <button @click="shangchuanclose">取消</button>
        </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "gradelist",
  data() {
    return {
      status: this.$route.query.status,
      status1: this.$route.query.status1,
      id: this.$route.query.id, //编号id
      tradesell: false,
      tradebuy: false,
      buymes: false,
      sellmes: false,
      name: "",
      price: "",
      address: "",
      password: "",
      time: "",
      shouxu: "",
      number: "",
      phone: '',

      titlelist: "",
      progect: ["查看打款截图", "上传打款截图", "查看打款截图"],
      dialogImageUrl: "",
      dialogVisible: false,
      dialogFormVisible: false,

      yulanimg: "",
      imgstatus: ""
    };
  },
  //计算挂卖总价和手续费
  computed: {
    charge: {
      get() {
        return (this.price * this.shouxu / 100).toFixed(2);
      }
    }
  },
  created() {
    if (this.status === "0") {
      //现金积分我要挂卖
      this.tradesell = true;
      this.myguasell();
    } else if (this.status === "1") {
      // 查看打款截图
      this.buymes = true;
      this.titlelist = "2";
      this.lookimg();
    } else if (this.status === "2") {
      // 上传打款截图
      this.buymes = true;
      this.titlelist = "1";
      this.loadimg();
    } else if (this.status === "4") {
      // 确认收款
      this.buymes = true;
      this.titlelist = "0";
      this.shoukuan();
    } else if (this.status === "3") {
      // 买入
      this.tradebuy = true;
      this.titlelist = "0";
      this.buysure();
    }
  },
  methods: {
    // 我要挂卖
    myguasell() {
      this.axios
        .post("Index/my_jifen_sell")
        .then(({ data }) => {
          console.log(data);
          this.name = data.user_name;
          this.shouxu = data.shouxu;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 确定挂卖
    tradesellalert() {
      this.axios
        .post("Index/my_jifen_sell_cl", {
          num: this.number,
          address: this.address,
          password: this.password
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status === "1") {
            this.$message({ message: "现金积分不足", type: "error" });
          } else if (data.status === "2") {
            this.$message({ message: "安全密码不正确", type: "error" });
          } else if (data.status === "3") {
            this.$router.go(-1);
            this.$message({ message: "操作成功", type: "success" });
            // this.$router.push('grade');
          } else if (data.status === "4") {
            this.$message({ message: "操作失败", type: "error" });
          } else if (data.status === "5") {
            this.$message({ message: "每天只能挂卖一单", type: "error" });
          } else if (data.status === "6") {
            this.$message({ message: "单次挂出不能超过500", type: "error" });
          } else if (data.status === "7") {
            this.$message({message: "累积挂出总量不能超过投资额的两倍",type: "error"});
          } else if (data.status === "8") {
            this.$message({message: "100美金起卖，卖的数量需是100美金的整数倍",type: "error"});
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 买入
    buysure() {
      this.axios
        .post("Index/trad_jifen_pay", {
          id: this.id
        })
        .then(({ data }) => {
          console.log(data);
          this.name = data.info.user_name;
          this.price = data.info.other;
          this.address = data.info.address;
          this.phone = data.info.user_phone;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 确定购买
    tradebuyalert() {
      console.log(11);
      this.axios
        .post("Index/trad_jifen_pay_cl", {
          id: this.id,
          password: this.password
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status === "1") {
            this.$message({ message: "安全密码不正确", type: "error" });
          } else if (data.status === "2") {
            this.$router.go(-1);
            this.$message({ message: "操作成功", type: "success" });
          } else if (data.status === "3") {
            this.$message({ message: "操作失败", type: "error" });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 进入上传截图页面
    loadimg() {
      this.axios
        .post("Index/trad_jifen_pay_img", {
          id: this.id
        })
        .then(({ data }) => {
          console.log(data);
          this.name = data.info.user_name;
          this.price = data.info.num;
          this.address = data.info.address;
          this.time = data.info.add_time;
          this.phone = data.info.user_phone;
        });
    },
    // 查看上传截图页面
    lookimg() {
      console.log(this.id);
      this.axios
        .post("Index/my_sell_jifen_info", {
          id: this.id
        })
        .then(({ data }) => {
          console.log(data);
          this.name = data.info.user_name;
          this.price = data.info.num;
          this.address = data.info.address;
          this.time = data.info.add_time;
          this.phone = data.info.user_phone;
          this.yulanimg = "http://ebuc.sosocnc.com/Public/" + data.info.img;
        });
    },
    tradesellclose() {
      this.$router.push("grade");
    },
    // 上传图片
    shangchuan(e) {
      var self = this;
      let file = e.target.files[0]; // 上传照片
      /* eslint-disable no-undef */
      let formData = new FormData(); // 创建form对象
      formData.append("img", file); // 通过append向form对象添加数据
      formData.append("id", self.id); // 添加form表单中其他数据
      console.log(formData.get("img")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        emulateJSON: true,
        withCredentials: true,
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios.post("http://ebuc.sosocnc.com/index.php/Home/Index/trad_jifen_pay_img_cl",
          formData,
          config
        )
        .then(({ data }) => {
          console.log(data);
          this.imgstatus = data.status;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    sureshang() {
      if (this.imgstatus === "1") {
        this.titlelist = "2";
        this.lookimg();
        this.$message({ message: "上传成功", type: "success" });
      } else if (this.imgstatus === "1") {
        this.$message({ message: "上传失败，请重新上传", type: "error" });
      }
    },
    // 查看截图页面
    shoukuan() {
      this.axios
        .post("Index/my_pay_jifen_info", {
          id: this.id
        })
        .then(({ data }) => {
          console.log(data);
          this.name = data.info.user_name;
          this.price = data.info.num;
          this.address = data.info.address;
          this.phone = data.info.user_phone;
          this.time = data.info.add_time;
          this.phone = data.info.user_phone;
          this.yulanimg = "http://ebuc.sosocnc.com/Public/" + data.info.img;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //确定收款
    sureshoukuan() {
      this.axios
        .post("Index/my_pay_jifen_cl", {
          id: this.id
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status === "1") {
            this.$message({ message: "收款成功", type: "success" });
            this.$router.go(-1);
          } else if (data.status === "2") {
            this.$message({ message: "操作失败", type: "error" });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shangchuanclose() {
      this.$router.push({ name: "grade", query: { activetype: "1" } });
    }
  }
};
</script>
<style lang='scss' scoped>
#gradelist {
  // padding-bottom: 40px;
  .tradetop {
    width: 100%;
    height: 55px;
    line-height: 65px;
    font-size: 13px;
    font-family: MicrosoftYaHei-Bold;
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
  }
  .tradesell {
    .warning {
      width: 550px;
      margin-top: 15px;
      margin-left: 25px;
      margin-bottom: 30px;
      padding-left: 5px;
      font-size: 11px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 1);
      background: rgba(255, 247, 230, 1);
      border-radius: 2px;
      line-height: 31px;
      border: 1px solid rgba(224, 3, 0, 1);
    }
    .message {
      margin-left: 40px;
      margin-top: 10px;
      margin-bottom: 10px;
      li {
        line-height: 50px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
      }
      input {
        width: 209px;
        height: 33px;
        padding-left: 5px;
        border-radius: 2px;
        border: 1px solid rgba(151, 151, 151, 1);
      }
      li:nth-of-type(5) {
        span {
          font-weight: normal;
        }
      }
    }
    .buymes li {
      line-height: 30px;
      span {
        font-weight: 700 !important;
      }
    }
    .uploadimg {
      margin: 0 17px;
      line-height: 40px;
      padding-left: 25px;
      border-top: 1px solid rgba(221, 221, 221, 1);
      p:nth-of-type(1) {
        font-weight: 700;
      }
      p:nth-of-type(2) {
        font-size: 12px;
        line-height: 20px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
      }
      .imageload {
        margin-top: 20px;
        a {
          display: block;
          width: 200px;
          height: 180px;
          text-align: center;
          // background-color: pink;
          position: relative;
          border-radius: 5px;
          border: 1px dashed #666;
          .imginp {
            width: 200px;
            height: 180px;
            cursor: pointer;
            opacity: 0;
          }
          i {
            font-size: 30px;
            position: absolute;
            top: 40%;
            left: 44%;
            pointer-events: none;
          }
        }
      }
      .yulanimg {
        // width: 200px;
        // height: 180px;
        margin-top: 20px;
        // border: 1px dashed #666;
        img {
          max-width: 800px;
        }
      }
      .notice {
        font-size: 10px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
        font-weight: normal;
        margin-top: 10px;
      }
    }
    .btn {
      margin-top: 50px;
      margin-left: 40px;
      button {
        cursor: pointer;
        width: 82px;
        height: 33px;
        background: rgba(224, 3, 0, 1);
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        margin-right: 25px;
      }
      .button2 {
        background: rgba(225, 225, 225, 1);
        color: rgba(0, 0, 0, 1);
      }
    }
  }
  .alertmes {
    margin-left: 40px;
    margin-top: -30px;
    min-width: 550px;
    li {
      line-height: 40px;
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      span {
        font-weight: 700;
      }
    }
    input {
      width: 209px;
      height: 33px;
      padding-left: 5px;
      border-radius: 2px;
      border: 1px solid rgba(151, 151, 151, 1);
    }
    li:nth-of-type(3) {
      span {
        color: rgba(224, 3, 0, 1);
      }
    }
    .btn {
      margin-top: 30px;
      button {
        cursor: pointer;
        width: 82px;
        height: 33px;
        background: rgba(224, 3, 0, 1);
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
        border-radius: 2px;
      }
      button:nth-of-type(2) {
        margin-left: 25px;
        background: rgba(225, 225, 225, 1);
        color: rgba(0, 0, 0, 1);
      }
    }
    .notice {
      font-size: 12px;
      line-height: 40px;
    }
  }
}
</style>